<template>
  <div class="main-content">
    <div class="tabs">
      <div class="item"
           v-for="(item,index) in tabs"
           :class="[index===activeIndex?'active':'']"
           @click="changeTab(index)">{{item}}</div>
    </div>
    <div @scroll="onScroll"
         id="content"
         ref="tab"
         class="contentBody">
      <div class="information-form">
        <h3 ref="0">基本信息</h3>
        <ul class="housing-list">
          <li>
            <div class="list-info-templates col-md-6">
              <label class="control-labels"
                     for="">楼盘名称:</label>
              <div class="control-details">
                <p class="ellipsis">{{premises.name}}</p>
              </div>
            </div>
            <div class="list-info-templates col-md-6">
              <label class="control-labels"
                     for="">省份市区:</label>
              <div style="display:inline-flex">
                <div class="control-details">
                  <p class="ellipsis">{{premises.area.fullName}}</p>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="list-info-templates col-md-6">
              <label class="control-labels"
                     for="">物业类型:</label>
              <div class="control-details">
                <p class="ellipsis">{{premises.estateTypeCN}}</p>
              </div>
            </div>
            <div class="list-info-templates col-md-6">
              <label class="control-labels"
                     for="">建筑类别:</label>
              <div class="control-details">
                <p class="ellipsis">{{premises.buildingTypeCN}}</p>
              </div>
            </div>
          </li>
          <li>
            <div class="list-info-templates col-md-6">
              <label class="control-labels"
                     for="">结佣方式:</label>
              <div class="control-details">
                <p class="ellipsis">{{premises.commissionWay}}</p>
              </div>
            </div>
            <div class="list-info-templates col-md-6">
              <label class="control-labels"
                     for="">装修状况:</label>
              <div class="control-details"
                   style="display:inline-flex">
                <div>
                  <p class="ellipsis">{{premises.decorationTypeName}}</p>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="list-info-templates col-md-6">
              <label class="control-labels"
                     for="">开盘日期:</label>
              <div class="control-details">
                <p class="ellipsis">{{premises.formatOpeningTime}}</p>
              </div>
            </div>
            <div class="list-info-templates col-md-6">
              <label class="control-labels"
                     for="">入住日期:</label>
              <div class="control-details">
                <p class="ellipsis">{{premises.formatCheckInTime}}</p>
              </div>
            </div>
          </li>
          <li>
            <div class="list-info-templates col-md-6">
              <label class="control-labels"
                     for="">均价:</label>
              <div class="control-details">
                <p class="ellipsis"
                   v-if="premises.averagePrice != ''">{{premises.averagePrice}} 元/㎡</p>
              </div>
            </div>
            <div class="list-info-templates col-md-6">
              <label class="control-labels"
                     for="">物业费:</label>
              <div class="control-details">
                <p class="ellipsis"
                   v-if="premises.propertyCharges != ''">{{premises.propertyCharges}} 元/㎡/月</p>
              </div>
            </div>
          </li>
          <li>
            <div class="list-info-templates col-md-6">
              <label class="control-labels"
                     for="">容积率:</label>
              <div class="control-details">
                <p class="ellipsis"
                   v-if="premises.plotRatio != ''">{{premises.plotRatio}}%</p>
              </div>
            </div>
            <div class="list-info-templates col-md-6">
              <label class="control-labels"
                     for="">绿化率:</label>
              <div class="control-details">
                <p class="ellipsis"
                   v-if="premises.greeningRate != ''">{{premises.greeningRate}}%</p>
              </div>
            </div>
          </li>
          <li>
            <div class="list-info-templates col-md-6">
              <label class="control-labels"
                     for="">物业公司:</label>
              <div class="control-details">
                <p class="ellipsis">{{premises.propertyCompany}}</p>
              </div>
            </div>
            <div class="list-info-templates col-md-6">
              <label class="control-labels"
                     for="">楼盘标签:</label>
              <div class="control-details">
                <p class="ellipsis">{{premises.codeNameCN}}</p>
              </div>
            </div>
          </li>
          <li>
            <div class="list-info-templates col-md-6">
              <label class="control-labels"
                     for="">物业地址:</label>
              <div class="control-details">
                <p class="ellipsis">{{premises.propertyAddr}}</p>
              </div>
            </div>
            <div class="list-info-templates col-md-6">
              <label class="control-labels"
                     for="">开发商:</label>
              <div class="control-details">
                <p class="ellipsis">{{premises.buildingCompany}}</p>
              </div>
            </div>
          </li>
          <li>
            <div class="list-info-templates col-md-6">
              <label class="control-labels"
                     for="">在售状态:</label>
              <div class="control-details">
                <p class="ellipsis"
                   v-if="premises.saleStatus==0">待售</p>
                <p class="ellipsis"
                   v-if="premises.saleStatus==1">在售</p>
                <p class="ellipsis"
                   v-if="premises.saleStatus==2">售罄</p>
                <p class="ellipsis"
                   v-if="premises.saleStatus==3">下架</p>
              </div>
            </div>
            <div class="list-info-templates col-sm-6">
              <label class="control-labels"
                     for="">售楼部地址:</label>
              <div class="control-text">
                <p>{{premises.saleAddr}}</p>
              </div>
            </div>
          </li>
          <li>
            <div class="list-info-templates col-md-6">
              <label class="control-labels"
                     for="">产权年限:</label>
              <div class="control-details">
                <p class="ellipsis"
                   v-if="premises.rightYears != ''">{{premises.rightYears}}年</p>
              </div>
            </div>
            <div class="list-info-templates col-md-6">
              <label class="control-labels"
                     for="">排序:</label>
              <div class="control-details">
                <div class="control-details">
                  <p class="ellipsis">{{premises.sequence}}</p>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="list-info-templates col-md-6">
              <label class="control-labels">地上车位数:</label>
              <div class="control-details">
                <div class="control-details">
                  <p class="ellipsis">{{premises.upCarPort}}</p>
                </div>
              </div>
            </div>
            <div class="list-info-templates col-md-6">
              <label class="control-labels">地下车位数:</label>
              <div class="control-details">
                <div class="control-details">
                  <p class="ellipsis">{{premises.downCarPort}}</p>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="list-info-templates col-md-6">
              <label class="control-labels"
                     for="">规划户数:</label>
              <div class="control-details">
                <p class="ellipsis">{{premises.houseHolds}}</p>
              </div>
            </div>
          </li>
          <li>
            <div class="list-info-templates col-md-6">
              <label class="control-labels"
                     for="">楼盘地址:</label>
              <div class="control-details">
                <p class="ellipsis">{{premises.premisesAddress}}</p>
              </div>
            </div>
          </li>
        </ul>
        <h3 ref="1">分销信息</h3>
        <ul class="housing-list">
          <li>
            <div class="list-info-templates">
              <label class="control-labels"
                     style="margin-left: 15px;"
                     for="">分销佣金:</label>
              <div style="margin-left: 20px; color:gray; word-wrap:break-word">
                *此处分销佣金只作为对分销商的展示所用,具体分销结佣的佣金设置请在佣金管理中进行设定
              </div>
              <div v-for="(item, index) in commissionList"
                   :key="index"
                   class="control-button-wrap">
                <div class="control-button-wrap-content">
                  <span>{{item.name}}</span> : <span>{{item.typeValue}}{{item.type}}</span> : <span>{{item.desc}}</span>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="list-info-templates col-md-6">
              <label class="control-labels"
                     for="">带看奖励:</label>
              <div class="control-details">
                <p class="ellipsis">{{premises.reward}}元</p>
              </div>
            </div>
            <div class="list-info-templates col-md-6">
              <label class="control-labels"
                     for="">{{dealType}}</label>
              <div class="control-details">
                <p class="ellipsis">{{premises.dealAward}}元</p>
              </div>
            </div>
          </li>
          <li>
            <div class="list-info-templates col-md-6">
              <label class="control-labels"
                     for="">最短报备时间:</label>
              <div class="control-details">
                <p class="ellipsis"
                   v-if="premises.specialTime && premises.specialTimeType != '4'">
                  {{setProtectTime(premises.specialTime,premises.specialTimeType)}}</p>
                <p class="ellipsis"
                   v-else>--</p>
              </div>
            </div>
            <div class="list-info-templates col-md-6">
              <label class="control-labels"
                     for="">到访延长时间:</label>
              <div class="control-details">
                <p class="ellipsis"
                   v-if="premises.visitProtectSwitch && premises.visitProtectSwitch == '1'">
                  {{setProtectTime(premises.visitProtect,premises.visitProtectType)}}</p>
                <p class="ellipsis"
                   v-else>--</p>
              </div>
            </div>
          </li>
          <li>
            <div class="list-info-templates col-md-6">
              <label class="control-labels"
                     for="">交易延长时间:</label>
              <div class="control-details">
                <p class="ellipsis"
                   v-if="premises.saveDaysType && premises.saveDaysType != '4'">
                  {{setProtectTime(premises.saveDays, premises.saveDaysType)}}</p>
                <p class="ellipsis"
                   v-else>--</p>
              </div>
            </div>
            <div class="list-info-templates col-md-6">
              <label class="control-labels"
                     for="">合作有效期:</label>
              <div class="control-details">
                <p class="ellipsis">{{premises.formatCooperationBeginTime}}至{{premises.formatCooperationEndTime}}</p>
              </div>
            </div>
          </li>
          <li>
            <div class="list-info-templates col-sm-12">
              <label class="control-labels"
                     for="">报备方式:</label>
              <div class="control-details">
                <p class="ellipsis">{{premises.reportWayCN}}</p>
              </div>
            </div>
          </li>
          <li>
            <div class="list-info-templates col-md-6">
              <label class="control-labels"
                     for="">项目总监:</label>
              <div class="control-details">
                <p class="ellipsis">{{premises.chief}}</p>
              </div>
            </div>
            <div class="list-info-templates col-md-6">
              <label class="control-labels"
                     for="">联系方式:</label>
              <div class="control-details">
                <p class="ellipsis">{{premises.chiefMobile}}</p>
              </div>
            </div>
          </li>
          <li>
            <div class="list-info-templates col-md-6">
              <label class="control-labels"
                     for="">项目经理:</label>
              <div class="control-details">
                <p class="ellipsis">{{premises.manager}}</p>
              </div>
            </div>
            <div class="list-info-templates col-md-6">
              <label class="control-labels"
                     for="">联系方式:</label>
              <div class="control-details">
                <p class="ellipsis">{{premises.mobile}}</p>
              </div>
            </div>
          </li>
          <li>
            <div class="list-info-templates col-sm-12">
              <label class="control-labels"
                     for="">促销信息:</label>
              <div class="control-text">
                <p v-html="premises.discount"></p>
              </div>
            </div>
          </li>
          <li>
            <div class="list-info-templates col-sm-12">
              <label class="control-labels"
                     for="">项目特色:</label>
              <div class="control-text">
                <p v-html="premises.feature"></p>
              </div>
            </div>
          </li>
          <li>
            <div class="list-info-templates col-sm-12">
              <label class="control-labels"
                     for="">合作规则:</label>
              <div class="control-text">
                <p v-html="premises.cooperationRule"></p>
              </div>
            </div>
          </li>
        </ul>
        <h3 ref="2">公司信息</h3>
        <ul class="housing-list">
          <li>
            <div class="list-info-templates col-md-6">
              <label class="control-labels"
                     for="">公司名称:</label>
              <div class="control-details">
                <p class="ellipsis">{{premises.corporateName}}</p>
              </div>
            </div>
          </li>
          <li>
            <div class="list-info-templates col-sm-12">
              <label class="control-labels"
                     for="">公司简介:</label>
              <div class="control-text">
                <p v-html="premises.corporateDesc"></p>
              </div>
            </div>
          </li>
          <li>
            <div class="list-info-templates col-sm-12">
              <label class="control-labels"
                     for="">证照资料:</label>
              <div class="control-text">
                <ul id="companyFileTab"
                    class="nav nav-tabs">
                  <li class="active">
                    <a href="#yingyezhizhao"
                       data-toggle="tab">营业执照</a>
                  </li>
                  <li>
                    <a href="#fenxiao"
                       data-toggle="tab">分销合同</a>
                  </li>
                  <li>
                    <a href="#xukezheng"
                       data-toggle="tab">预售许可证</a>
                  </li>
                  <li>
                    <a href="#shouquanshu"
                       data-toggle="tab">开发商授权书</a>
                  </li>
                </ul>
                <div id="companyFileTabContent"
                     class="tab-content">
                  <div class="tab-pane fade in active"
                       id="yingyezhizhao">
          <li class="col-md-2 file-image"
              v-for="(row,index) in licenseList"
              :key="index"
              v-if="row.isDeleted==0 && row.imageType==60">
            <img v-bind:src="row.imageUrl"
                 width="150px"
                 height="115px" />
          </li>
      </div>
      <div class="tab-pane fade"
           id="fenxiao">
        <li class="col-md-2 file-image"
            v-for="(row,index) in licenseList"
            :key="index"
            v-if="row.isDeleted==0 && row.imageType==70">
          <img v-bind:src="row.imageUrl"
               width="150px"
               height="115px" />
        </li>
      </div>
      <div class="tab-pane fade"
           id="xukezheng">
        <li class="col-md-2 file-image"
            v-for="(row,index) in licenseList"
            :key="index"
            v-if="row.isDeleted==0 && row.imageType==80">
          <img v-bind:src="row.imageUrl"
               width="150px"
               height="115px" />
        </li>
      </div>
      <div class="tab-pane fade"
           id="shouquanshu">
        <li class="col-md-2 file-image"
            v-for="(row,index) in licenseList"
            :key="index"
            v-if="row.isDeleted==0 && row.imageType==90">
          <img v-bind:src="row.imageUrl"
               width="150px"
               height="115px" />
        </li>
      </div>
    </div>
  </div>
  </div>
  </li>
  </ul>
  <h3 ref="3">项目资料</h3>
  <ul class="housing-list">
    <li>
      <div class="list-info-templates col-sm-12">
        <label class="control-labels"
               for="">楼盘卖点:</label>
        <div class="control-text">
          <p v-html="premises.selling"></p>
        </div>
      </div>
    </li>
    <li>
      <div class="list-info-templates col-sm-12">
        <label class="control-labels"
               for="">目标客户:</label>
        <div class="control-text">
          <p v-html="premises.customer"></p>
        </div>
      </div>
    </li>
    <li>
      <div class="list-info-templates col-sm-12">
        <label class="control-labels"
               for="">拓客技巧:</label>
        <div class="control-text">
          <p v-html="premises.saleSkill"></p>
        </div>
      </div>
    </li>
    <li>
      <div class="list-info-templates col-sm-12">
        <label class="control-labels"
               for="">项目介绍:</label>
        <div class="control-text">
          <p v-html="premises.introduction"></p>
        </div>
      </div>
    </li>
    <li>
      <div class="list-info-templates col-sm-12">
        <label class="control-labels"
               for="">报备模板:</label>
        <div class="control-text">
          <p v-html="premises.reportTemp"></p>
        </div>
      </div>
    </li>
    <li>
      <div class="list-info-templates col-sm-12">
        <label class="control-labels"
               for="">楼盘资料:</label>
        <div class="control-text">
          <ul>
            <li v-for='(item, index) in premisesFileList'
                style="display:inline">
              <div v-if="item.isDeleted == 0">
                <i class="fa fa-file-word-o"
                   v-if="item.fileType == 8"></i>
                <i class="fa fa-file-excel-o"
                   v-if="item.fileType == 9"></i>
                <i class="fa fa-file-ppt-o"
                   v-if="item.fileType == 10"></i>
                <i class="fa fa-file-image-o"
                   v-if="item.fileType == 11"></i>
                <i class="fa fa-file-pdf-o"
                   v-if="item.fileType == 12"></i>
                <i class="fa fa-file-zip-o"
                   v-if="item.fileType == 13"></i>
                <a style="padding-left: 5px; padding-right: 5px; text-decoration: underline;"
                   v-bind:href="item.url">{{item.fileName}}</a>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </li>
    <li>
      <div class="list-info-templates col-sm-12">
        <label class="control-labels"
               for="">楼书附件上传:</label>
        <div class="control-text">
          <p>
            <a v-bind:href="premises.lsUrl"
               v-if="(premises.lsUrl != null && premises.lsUrl.length > 0)"
               target="_blank"
               style="color: cornflowerblue">
              楼书附件
            </a>
          </p>
        </div>
      </div>
    </li>
    <li>
      <div class="list-info-templates col-sm-12">
        <label class="control-labels"
               for="">可售户型:</label>
        <div class="control-text"
             style="margin-left:90px">
          <ul>
            <li class="col-md-3"
                v-for="(hxt, index) in hxtList"
                :key="index"
                v-if="(hxt != null && hxt.imgUrl != null && hxt.imgUrl != '')">
              <div :id="'hxt_'+index">
                <img v-for="(path, i) in hxt.imgUrl"
                     :key="i"
                     v-bind:src="path"
                     v-show="i == 0"
                     width="210px"
                     height="140px;"
                     style="display: none;" />
              </div>
              <div class="hxtImgTip">{{hxt.imgUrl.length}}张</div>
              <p v-if="(hxt.averagePrice!=''&&hxt.averagePrice!=null)"
                 style="width:130px">
                <a>{{hxt.huxingName}}&nbsp;{{hxt.averagePrice}}元/平米</a>
              </p>
              <p>{{hxt.apartmentLayout}}&emsp;{{hxt.area}}平米</p>
            </li>
          </ul>
        </div>
      </div>
    </li>
    <li>
      <div class="list-info-templates col-sm-12">
        <label class="control-labels"
               for="">封面图片地址:</label>
        <div class="control-text"
             v-if="(premises.url != null && premises.url != '')">
          <img v-bind:src="premises.url"
               width="500px"
               height="400px;" />
        </div>
      </div>
    </li>
    <li>
      <div class="list-info-templates col-sm-12">
        <label class="control-labels"
               for="">全景看房地址:</label>
        <div class="control-text">
          <a class="ellipsis"
             :href="premises.panoramicView">{{premises.panoramicView}}</a>
        </div>
      </div>
    </li>
  </ul>
  <h3 ref="4">楼盘相册</h3>
  <div class="information-form">
    <ul class="nav nav-tabs"
        style="margin: 15px">
      <li class="presentation"
          role="presentation"
          id="p3"><a href="#3"
           data-toggle="tab">样板间({{showImgCount(premisesImages[3])}})</a></li>
      <li class="presentation"
          role="presentation"
          id="p4"><a href="#4"
           data-toggle="tab">效果图({{showImgCount(premisesImages[4])}})</a></li>
      <li class="presentation"
          role="presentation"
          id="p5"><a href="#5"
           data-toggle="tab">小区配套({{showImgCount(premisesImages[5])}})</a></li>
      <li class="presentation"
          role="presentation"
          id="p6"><a href="#6"
           data-toggle="tab">实景图({{showImgCount(premisesImages[6])}})</a></li>
      <li class="presentation"
          role="presentation"
          id="p7"><a href="#7"
           data-toggle="tab">项目现场({{showImgCount(premisesImages[7])}})</a></li>
    </ul>
    <div class="tab-content panel-body"
         style="margin: 15px;min-height: 110px;">
      <div class="tab-pane fade in "
           :class="{active:row==3}"
           :id="row"
           v-for="(row,index) in premisesTypes"
           :key="index">
        <ul class="premises-image-list">
          <li class="col-md-2"
              v-for="(img, i) in premisesImages[row]"
              :key="i">
            <img v-bind:src="img.imageUrl"
                 width="100px"
                 height="80px;" />
          </li>
        </ul>
      </div>
    </div>
  </div>
  <h3 ref="5">驻守人员</h3>
  <div class="table-responsive">
    <table class="table table-striped table-bordered min-width-790"
           style="margin: 10px;">
      <thead>
        <tr>
          <th width="7%">序号</th>
          <th width="10%">部门</th>
          <th width="15%">案场人员</th>
          <th width="15%">联系电话</th>
          <th width="10%">角色</th>
          <th width="10%">状态</th>
          <th width="">此员工还驻守的其他楼盘</th>
          <th>设为案场热线</th>
          <th width="10%">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in premisesCMList"
            :key="index">
          <td>{{index + 1}}</td>
          <td>{{row.departmentName}}</td>
          <td>{{row.accountName}}</td>
          <td>{{row.phone}}</td>
          <td>{{row.roleName}}</td>
          <td><span :class="[{stateOne: row.piStatus==1, stateTwo: row.piStatus==0}]">{{row.piStatus==1?"启用":"禁用"}}</span>
          </td>
          <td>{{row.premisesNames}}</td>
          <td>
            <Radio v-model="row.phoneStatusShow"
                   :disabled="phoneStatusDisabled"
                   @on-change="function(status){changePhoneStatus(status,row.id,row.premisesId)}" />
          </td>
          <td>
            <button type="button"
                    class="btnA edit"
                    @click="cancelZhuShou(row.id)">取消驻守</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <h3 ref="6">项目推荐人</h3>
  <div class="table-responsive">
    <table class="table table-striped table-bordered min-width-790"
           style="margin: 10px;">
      <thead>
        <tr>
          <th width="7%">序号</th>
          <th width="10%">部门</th>
          <th width="15%">姓名</th>
          <th width="15%">联系电话</th>
          <th width="10%">角色</th>
          <th width="10%">状态</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-if="!recommendList.length">
          <td colspan="7">
            <div style="height: 100px; line-height: 100px;">
              <span>该楼盘暂无推荐人，请添加</span>
            </div>
          </td>
        </tr>
        <tr v-for="(row, index) in recommendList"
            :key="index">
          <td>{{index + 1}}</td>
          <td>{{row.deptName}}</td>
          <td>{{row.userName}}</td>
          <td>{{row.phone}}</td>
          <td>{{row.roleName}}</td>
          <td><span :class="[{stateOne: row.status == 1, stateTwo: row.status == 0}]">{{row.status == 1?"启用":"禁用"}}</span>
          </td>
          <td>
            <span @click="cancelReferrer(row)"
                  style="color: #F87242; cursor: pointer"> 取消推荐人</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  </div>
  </div>
  </div>
</template>

<script>
import calendar from "../common/calendar.vue";
import viewer from "../../assets/js/viewer.js";
import { Service, Log } from "../../js/base";
import { AnchorLink, Anchor } from "iview";
export default {
  data() {
    return {
      premises: {
        area: {
          fullName: ""
        }
      },
      hxtList: [],
      province_list: [],
      city_list: [],
      area_list: [],
      estate_list: [],
      decoration_list: [],
      buildType_list: [],
      build_list: [],
      saleStatus_list: [],
      baseCodeValueList: [],
      dealType: "",
      commissionList: [],
      licenseList: [],
      premisesImages: [],
      premisesTypes: [3, 4, 5, 6, 7],
      premisesCMList: [],
      phoneStatusDisabled: false,
      recommendList: [],
      premisesId: this.$route.params.premisesId,
      premisesFileList: [],
      tabs: [
        "基本信息",
        "分销信息",
        "公司信息",
        "项目资料",
        "楼盘相册",
        "驻守人员",
        "项目推荐人"
      ],
      activeIndex: 0
    };
  },
  mounted: function () {
    //初始化
    this.initPremisesCM();
    this.initData();
    this.initHxt();
    this.get;
  },
  components: {
    calendar,
    AnchorLink,
    Anchor
  },
  methods: {
    onScroll(e) {
      if (e.target.scrollTop < this.$refs[1].offsetTop) {
        this.activeIndex = 0;
      } else if (
        e.target.scrollTop >= this.$refs[1].offsetTop &&
        e.target.scrollTop < this.$refs[2].offsetTop
      ) {
        this.activeIndex = 1;
      } else if (
        e.target.scrollTop >= this.$refs[2].offsetTop &&
        e.target.scrollTop < this.$refs[3].offsetTop
      ) {
        this.activeIndex = 2;
      } else if (
        e.target.scrollTop >= this.$refs[3].offsetTop &&
        e.target.scrollTop < this.$refs[4].offsetTop
      ) {
        this.activeIndex = 3;
      } else if (
        e.target.scrollTop >= this.$refs[4].offsetTop &&
        e.target.scrollTop < this.$refs[5].offsetTop
      ) {
        this.activeIndex = 4;
      } else if (
        e.target.scrollTop >= this.$refs[5].offsetTop &&
        e.target.scrollTop < this.$refs[6].offsetTop
      ) {
        this.activeIndex = 5;
      } else if (e.target.scrollTop >= this.$refs[6].offsetTop) {
        this.activeIndex = 6;
      }
    },
    changeTab(index) {
      this.activeIndex = index;
      this.$nextTick(() => {
        this.$refs.tab.scrollTop = this.$refs[index].offsetTop;
      });
    },
    setProtectTime(time, type) {
      if (type == "1") {
        return time / 1440 + "天";
      } else if (type == 2) {
        return time / 60 + "小时";
      }
      return time + "分钟";
    },
    getRecommendList() {
      const _this = this;
      Service.Recommend.getRecommendList(this.premisesId, this).then((list) => {
        _this.recommendList = list;
      });
    },
    /**
     * 保存/取消推荐人
     * (新增删除同一个接口)
     */
    cancelReferrer(row) {
      const _this = this;
      const index = layer.confirm(
        `您是否要取消该推荐人(${row.userName})？`,
        {
          btn: ["确定取消", "再考虑考虑"] //按钮
        },
        function () {
          Service.Recommend.saveRecommend({
            premisesId: _this.premisesId,
            recommendIdList: [row.recommenderId],
            _this,
            type: "DELETE"
          })
            .then((rsp) => {
              _this.getRecommendList();
              layer.close(index);
            })
            .catch((e) => {
              layer.close(index);
            });
        },
        function () {}
      );
    },
    initData: function () {
      this.getRecommendList();
      var _self = this;
      var url = this.utilHelper.apiUrl + "/api/getPremisesDetail";
      var body = {};
      body.params = {
        id: _self.$route.params.premisesId
      };
      _self.$http.post(url, body).then((response) => {
        var resData = response.body.resData;
        if (resData.result == "1") {
          _self.premises = resData.detailResDto;
          _self.licenseList = resData.detailResDto.licenseList;
          if (_self.premises.dealType == "2") {
            _self.dealType = "现金奖:";
          } else {
            _self.dealType = "成交奖:";
          }
          if (_self.premises.commission) {
            _self.commissionList = JSON.parse(_self.premises.commission);
          }
          //均价
          if (_self.premises.averagePrice) {
            let price = _self.premises.averagePrice.split(",");
            if (price.length > 1) {
              if (price[0] && price[1]) {
                _self.premises.averagePrice = price[0] + " 至 " + price[1];
              } else if (price[0]) {
                _self.premises.averagePrice = price[0];
              } else if (price[1]) {
                _self.premises.averagePrice = price[1];
              }
            }
          }
          //设置开盘日期
          $("#formatOpeningTime").text(_self.premises.formatOpeningTime);

          // _self.premisesImages = resData.premisesImages;
          _self.getImageAndFile(resData.premisesImages);
        }
      });
    },
    getImageAndFile: function (premisesImages) {
      var _self = this;
      _self.premisesImages = {};
      _self.premisesFileList = [];
      var imageTypeList = [3, 4, 5, 6, 7];
      var fileTypeList = [8, 9, 10, 11, 12, 13];
      for (var item in premisesImages) {
        inter: for (var k = 0; k < imageTypeList.length; k++) {
          if (imageTypeList[k] == item) {
            _self.premisesImages[item] = premisesImages[item];
            break inter;
          }
        }
        for (var k = 0; k < fileTypeList.length; k++) {
          if (fileTypeList[k] == item) {
            for (var i = 0; i < premisesImages[item].length; i++) {
              var premisesFile = {
                isDeleted: premisesImages[item][i].isDeleted,
                url: premisesImages[item][i].imageUrl,
                fileType: premisesImages[item][i].imageType,
                fileName: premisesImages[item][i].imageName,
                id: premisesImages[item][i].id
              };
              _self.premisesFileList.push(premisesFile);
            }
            break;
          }
        }
        console.log(_self.premisesFileList);
      }
    },
    initHxt: function () {
      var _self = this;
      var url = this.utilHelper.apiUrl + "/api/getPremisesHxt";
      var body = {};
      body.params = {
        id: _self.$route.params.premisesId
      };
      _self.$http.post(url, body).then((response) => {
        var resData = response.body.resData;
        if (resData.result == "1") {
          _self.hxtList = resData.getPremisesHxt;
          if (_self.hxtList && _self.hxtList.length > 0) {
            _self.hxtList.forEach((item, index) => {
              item.imgUrl = item.imgUrl.split(";");
              _self.imgViewer("hxt_" + index);

              let areaShow = "";
              let areaArr = item.area.split(",");
              if (areaArr.length) areaShow = areaArr[0];
              if (areaArr.length > 1 && areaArr[0] != areaArr[1]) {
                areaShow += " ~ " + areaArr[1];
              }
              item.area = areaShow;
            });
          }
        }
      });
    },
    initPremisesCM: function () {
      var _self = this;
      var url = this.utilHelper.apiUrl + "/api/getPremisesCMList";
      var body = {};
      body.params = {
        premisesId: _self.$route.params.premisesId
      };
      _self.$http.post(url, body).then((response) => {
        var resData = response.body.resData;
        _self.premisesCMList = resData.cmDtoList;
        for (let i in _self.premisesCMList) {
          if (_self.premisesCMList[i].phoneStatus == 1) {
            _self.premisesCMList[i].phoneStatusShow = true;
          } else {
            _self.premisesCMList[i].phoneStatusShow = false;
          }
        }
      });
    },
    //创建文件对象
    onFileChange(e) {
      layer.load(0, {
        shade: false
      }); //弹出加载层
      var files = e.target.files || e.dataTransfer.files;
      if (!files.length) return;
      var size = files[0].size;
      if (size > 3145728) {
        layer.msg("图片大小不能超过3M");
        layer.closeAll("loading"); //关闭加载层
        return;
      }
      this.createImage(files[0]);
    },
    createImage(file) {
      var _self = this;
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function (e) {
        _self.ajaxfile(e.target.result);
      };
    },
    //将base64转换blob
    dataURLtoBlob(dataUrl) {
      var arr = dataUrl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], {
        type: mime
      });
    },
    //上传图片
    ajaxfile(file) {
      var _self = this;
      var myForm = new FormData(); //创建formdata
      var blobBin = _self.dataURLtoBlob(file); //base64转换blob
      myForm.append("blobObject", blobBin); //想formData添加blob数据
      var url = _self.utilHelper.apiUrl + "/api/uploadBase64";
      _self.$http.post(url, myForm).then((response) => {
        layer.closeAll("loading"); //关闭加载层
        var data = response.body;
        if (data.result == "1") {
          var filesUrl = {
            fileUrl: file
          };
          _self.fileList.push(filesUrl);
          var fileName = {
            fileName: data.resData.imgName
          };
          _self.fileNameList.push(fileName);
        } else {
          layer.msg("图片上传失败，请重试");
        }
      });
    },
    //图片预览
    //功能执行完后初始化图片预览
    imgViewer(id) {
      this.$nextTick(() => {
        $("#" + id).viewer();
      });
    },
    //删除图片
    deletefile(id) {
      this.fileList.splice(id, 1);
      this.fileNameList.splice(id, 1);
    },
    showImgCount(list) {
      if (list) {
        return list.length;
      } else {
        return 0;
      }
    },
    cancelZhuShou(cmId) {
      var _self = this;
      layer.confirm(
        "您是否要取消驻守该楼盘？",
        {
          btn: ["确定取消", "再考虑考虑"] //按钮
        },
        function () {
          var url = _self.utilHelper.apiUrl + "/api/unbindPartnerToPremises";
          var body = {};
          body.params = {
            cmId: cmId
          };
          _self.$http.post(url, body).then(
            (response) => {
              var resData = response.body.resData;
              var result = resData.result;
              var resultMsg = resData.resultMsg;
              //输出操作信息
              layer.msg(
                resultMsg,
                {
                  time: 1000
                },
                function () {
                  if ("1" == result) {
                    _self.initPremisesCM();
                  }
                }
              );
            },
            (response) => {}
          );
        },
        function () {}
      );
    },
    //设置热线
    changePhoneStatus: function (status, id, premisesId) {
      var _self = this;
      _self.phoneStatusDisabled = true;
      for (let i in _self.premisesCMList) {
        if (_self.premisesCMList[i].id == id) {
          _self.premisesCMList[i].phoneStatusShow = true;
        } else {
          _self.premisesCMList[i].phoneStatusShow = false;
        }
      }
      //处理数据
      let params = {
        caseMemberId: id,
        phoneStatus: 1,
        premisesId: premisesId
      };
      var _self = this;
      var url = this.utilHelper.apiUrl + "/api/updateCaseMember";
      var body = { params: params };
      _self.$http.post(url, body).then((response) => {
        var resData = response.body.resData;
        this.phoneStatusDisabled = false;
      });
    }
  }
};
</script>
<style scoped lang="less">
.main-content {
  position: fixed;
  right: 28px;
  left: 220px;
  bottom: 0;
  top: 105px;
  .contentBody {
    position: absolute;
    top: 0;
    bottom: 2px;
    left: 0;
    right: 0;
    overflow-y: scroll;
    overflow-x: hidden;
  }
  .tabs {
    position: fixed;
    top: 70px;
    display: flex;
    height: 35px;
    left: 220px;
    right: 28px;
    z-index: 9;
    .item {
      flex: 1;
      line-height: 35px;
      text-align: center;
      color: #515a6e;
      font-weight: bold;
      border: 1px solid #ddd;
      background-color: #fff;
    }
    .active {
      background-color: #f87242;
    }
  }
  .tab-content {
    .tab-pane {
      padding-top: 10px;
    }
  }
  .control-labels {
    float: left;
    width: 90px;
    text-align: right;
    margin-right: 20px;
  }
  .information-form:last-child {
    margin-bottom: 0;
  }
}
.information-form h3 {
  margin-top: 5px;
}
.information-form {
  margin-top: 0;
}
.hxtImgTip {
  position: absolute;
  top: 130px;
  left: 185px;
  background-color: #ddd;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 25px;
}
</style>